/**
 * Created by umakr on 2018/5/18.
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Table, Button, Card, Form, Modal,Select,Row,Col,Divider,DatePicker,Input
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
const FormItem = Form.Item;
const Search = Input.Search;
import styles from './listFeedback.less';
import moment from 'moment';

@connect(state => ({
  feedback: state.feedback,
}))
@Form.create()
export default class listFeedback extends PureComponent {
  state = {
    pageNo:1,
    pageSize:6,
    total:0,
    feedbackListData:[],
    iamgeVisible:false,
    imageSrc:'',
    type:'',
    systemName:'',
    confirmStatus:'',
    solveStatus:'',
    startTime:'',
    endTime:'',
  };

  ////初始化渲染后触发 整个过程只调用一次
  componentDidMount() {
    this.loadFeedbackListInfo();
  }

  loadFeedbackListInfo(){
    const {pageNo,pageSize,type,systemName,confirmStatus,solveStatus,startTime,endTime} = this.state;
    const { dispatch } = this.props;
    const params = {
      pageNo: pageNo,
      pageSize: pageSize,
      type:type,
      systemName:systemName,
      startTime:startTime,
      endTime:endTime,
      confirmStatus:confirmStatus,
      solveStatus:solveStatus,
    };
    console.log(params)
    dispatch({
      type: 'feedback/listFeedback',  //请求的action
      payload:params,
      callback:(data) =>{
        console.log(data)
        this.setState({
          feedbackListData: data.data.list,
          pageNo:data.data.pageNo,
          pageSize:data.data.pageSize,
          total:data.data.total,
        });
      }
    });

  }

  turnToAdAddPage(record,index){
    const { dispatch} = this.props;
    var me =this;
    if(index === 0){
      //确认
      const params = {
        id:record.id,
        confirmStatus:1,
        solveStatus:'',
        delStatus:'',
      };
      dispatch({
        type: 'feedback/updateFeedback',
        payload:params,
        callback:(data) =>{
          if(data.errorCode != 0){
            me.loadFeedbackListInfo();
          }
        }
      });
    } else if(index === 1){
      //解决
      const params = {
        id:record.id,
        solveStatus:1,
        confirmStatus:'',
        delStatus:'',
      };
      dispatch({
        type: 'feedback/updateFeedback',
        payload:params,
        callback:(data) =>{
          if(data.errorCode != 0){
            me.loadFeedbackListInfo();
          }
        }
      });
    } else {
      //删除
      const params = {
        id:record.id,
        delStatus:1,
        confirmStatus:'',
        solveStatus:'',
      };
      Modal.confirm({
        title: '提示',
        content: '您确定删除该反馈吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          dispatch({
            type: 'feedback/updateFeedback',
            payload:params,
            callback:(data) =>{
              if(data.errorCode != 0){
                me.loadFeedbackListInfo();
              }
            }
          });
        }
      })
    }
  }

  handleTableChange = (page, pageSize) => {
    this.state.pageNo = page;
    this.setState({
      pageNo:page,
      pageSize:pageSize
    });
    this.loadFeedbackListInfo();
  }

  handleSearch = (e) => {
    const self = this;
    self.setState({
      pageNo:1,
    },() => {
      self.loadFeedbackListInfo();
    });
  }

  /**
   * 查看图片 关闭图片Modal
   */
  handleImagePlay = (imageSrc) => {
    this.setState({
      imageSrc:imageSrc,
      iamgeVisible:true
    });
    event.stopPropagation();
  }

  handleCancelImageModal= () => {
    this.setState({
      iamgeVisible:false
    });
  }

  handleChangeType(value) {
    this.setState({
      type:value
    })
  }

  handleChangeSystemName(value) {
    this.setState({
      systemName:value
    })
  }

  handleChangeConfirmStatus(value) {
    this.setState({
      confirmStatus:value
    })
  }

  handleChangeSolveStatus(value) {
    this.setState({
      solveStatus:value
    })
  }

  onDataPickChange = (dates, dateStrings) => {
    this.setState({
      startTime: dateStrings[0],
      endTime: dateStrings[1]
    })
  }

  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.setState({
      pageNo:1,
      type:'',
      systemName:'',
      confirmStatus:'',
      solveStatus:'',
      startTime:'',
      endTime:''
    },() => {
      this.loadFeedbackListInfo();
    });
  }

  renderForm() {
    const RangePicker = DatePicker.RangePicker;
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row >
          <Col md={4} sm={4}>
            <FormItem label="类型" wrapperCol={{span:2}} style={{marginLeft:10}}>
              <Select value={this.state.type} defaultValue={this.state.type} style={{width:100,marginLeft:-10}} onChange={this.handleChangeType.bind(this)}>
                <Select.Option value="">全部</Select.Option>
                <Select.Option value="1">优化建议</Select.Option>
                <Select.Option value="0">bug</Select.Option>
                <Select.Option value="2">无</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col md={4} sm={14}>
            <FormItem label="系统" wrapperCol={{span:12}} style={{marginLeft:-50}}>
              <Select value={this.state.systemName} defaultValue={this.state.systemName} style={{width:100,marginLeft:-10}} onChange={this.handleChangeSystemName.bind(this)}>
                <Select.Option value="">全部</Select.Option>
                <Select.Option value="Android">Android</Select.Option>
                <Select.Option value="iOS">ios</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col md={4} sm={14}>
            <FormItem label="确认状态" wrapperCol={{span:12}} style={{marginLeft:-130}}>
              <Select value={this.state.confirmStatus} defaultValue={this.state.confirmStatus} style={{width:90,marginLeft:-10}} onChange={this.handleChangeConfirmStatus.bind(this)}>
                <Select.Option value="">全部</Select.Option>
                <Select.Option value="0">未确认</Select.Option>
                <Select.Option value="1">已确认</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col md={4} sm={14}>
            <FormItem label="解决状态" wrapperCol={{span:12}} style={{marginLeft:-200}}>
              <Select value={this.state.solveStatus} defaultValue={this.state.solveStatus} style={{width:90,marginLeft:-10}} onChange={this.handleChangeSolveStatus.bind(this)}>
                <Select.Option value="">全部</Select.Option>
                <Select.Option value="0">未解决</Select.Option>
                <Select.Option value="1">已解决</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col md={4} sm={14}>
            <FormItem  label="时间设置" style={{marginLeft:-260}}>
              {getFieldDecorator('spreadExpire')(
                <RangePicker
                  // disabled={showDetail}
                  ranges={{ "今天": [moment(), moment()], '这个月': [moment(), moment().endOf('month')] }}
                  showTime
                  format="YYYY/MM/DD HH:mm:ss"
                  onChange={this.onDataPickChange}
                  style={{marginLeft:-10}}
                />
              )}
            </FormItem>
          </Col>
          <Col style={{ marginTop: 4}}>
            <span >
              <Button  style={{ marginLeft: -30 }} type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 30 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { pageSize ,total,pageNo} = this.state;
    const columns = [{
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width:'6.5%',
      render: (text, record) => (
        <span>
          {record.type != null ? record.type ===0 ? 'bug':'优化建议'  :'无' }
        </span>
      )
    }, {
      title: '反馈内容',
      dataIndex: 'content',
      key: 'content',
      width:'6%'
    }, {
      title: '反馈图片',
      dataIndex: 'screenshoot',
      key: 'screenshoot',
      width:'20%',
      render: (text, record) => {
        if(record.screenshoot.length != 0) {
          var screenshoot = eval('(' + record.screenshoot + ')');
          if(screenshoot.length === 1) {
            return(
              <span>
                <img src={screenshoot[0]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[0])} />
              </span>
            )
          } else if(screenshoot.length === 2) {
            return(
              <span >
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[0]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[0]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[1]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[1]) } />
                </span>
              </span>
            )
          }  else if(screenshoot.length === 3) {
            return(
              <span>
                <span >
                  <img src={screenshoot[0]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[0]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[1]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[1]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[2]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[2]) } />
                </span>

              </span>
            )
          } else if(screenshoot.length === 4) {
            return(
              <span >
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[0]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[0]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[1]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[1]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[2]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[2]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[3]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[3]) } />
                </span>
              </span>
            )
          } else{
            return(
              <span>
                <span >
                  <img src={screenshoot[0]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[0]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[1]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[1]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[2]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[2]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[3]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[3]) } />
                </span>
                <span style={{marginLeft:5}}>
                  <img src={screenshoot[4]} style={{width:50,height:50,marginLeft:0,cursor:"pointer" }}  onClick={() => this.handleImagePlay(screenshoot[4]) } />
                </span>
              </span>
            )
          }
        }
      },
    }, {
      title: '手机型号',
      dataIndex: 'model',
      key: 'model',
      width:'6%',
    },{
      title: '系统名称',
      dataIndex: 'systemName',
      key: 'systemName',
      width:'6%'
    },{
      title: '系统版本',
      dataIndex: 'systemVersion',
      key: 'systemVersion',
      width:'6%'
    },{
      title: 'app版本',
      dataIndex: 'appVersion',
      key: 'appVersion',
      width:'5.5%'
    },{
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      width:'6%'
    },{
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width:'5%'
    },{
      title: '时间',
      dataIndex: 'time',
      key: 'time',
      width:'5%'
    },{
      title: '是否确认',
      dataIndex: 'confirmStatus',
      key: 'confirmStatus',
      width:'5%',
      render: (text, record) => (
        <span>
          {record.confirmStatus ===0 ? '未确认'  :'已确认' }
        </span>
      )
    },{
      title: '是否解决',
      dataIndex: 'solveStatus',
      key: 'solveStatus',
      width:'5%',
      render: (text, record) => (
        <span>
          {record.solveStatus ===0 ? '未解决'  :'已解决' }
        </span>
      )
    }, {
      title: '操作',
      width:'10%',
      render: (text, record) => (
        <span>
          {record.confirmStatus === 0
            ? <a href="javascript:void(0)" onClick={() => this.turnToAdAddPage(record,0)} >确认</a>
            : <a disabled="true" >已确认</a>}
          <Divider type="vertical" />
          {record.solveStatus == 0
            ? <a href="javascript:void(0)" onClick={() => this.turnToAdAddPage(record,1)} >解决</a>
            : <a disabled="true" >已解决</a>}
          <Divider type="vertical" />
          <a href="javascript:void(0)" onClick={() => this.turnToAdAddPage(record,2)} >删除</a>
        </span>
      ),
    }];

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    return (
      <div>
        <PageHeaderLayout>
        <Card title="用户反馈列表" >
          <div className={styles.tableListForm}>
            {this.renderForm()}
          </div>
          <Row gutter={16}>
            <Col className="gutter-row" span={24}>
              <Table dataSource={this.state.feedbackListData} columns={columns} style={{ width: '100%' }}
                     pagination={paginationProps}  />
            </Col>
          </Row>
        </Card>
        <Modal
          visible={this.state.iamgeVisible}
          footer={null}
          onCancel={this.handleCancelImageModal}>
          <img alt="example" style={{ width: '100%' }} src={this.state.imageSrc} />
        </Modal>
        </PageHeaderLayout>
      </div>
    );
  }
}
